<template>
  <view class="songplay">
    <uni-popup ref="popup" type="bottom" background-color="#fff" class="list">
        <uni-section :title="'播放列表(' + music.songs.length + ')' " type="line"></uni-section>
        <uni-list v-for="(item , i) in music.songs" :key="item.id">
            <uni-list-chat :title="item.name"
                :avatar="item.al?.picUrl" :note="item.ar?.map(a => a.name).join(' / ')" :clickable="true" @click="handoff(item)">
                <view class="item-right">
                    <text :class="['item-text',{active: index === i }]">{{ index === i ? '正在播放' : '播放' }}</text>
                    <uni-icons type="arrow-right" size="14px" color="#999"></uni-icons>
                </view>
            </uni-list-chat>
        </uni-list>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { ref , computed, watch } from "vue";
import { useMusicStore } from '@/store/listMusic' // 获取 歌单 和 正在播放的 音乐
import type { TrackItem } from '@/services/type' 
const music = useMusicStore()

const index = ref<number>(-1)

const popup = ref()
const open = () => {
    console.log(music.songs)
    // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
    popup.value.open('bottom')
}

const handoff = (item:TrackItem) => {
    music.index = music.songs.findIndex(a => a.id === item.id)
    music.song = item
    popup.value.close()
}

watch(
    () => music.song,
    () => {
        index.value = music.songs.findIndex(a => a === music.song as TrackItem)
    },
    {
        immediate:true
    }
)

// 将方法暴露出去，以便父组件调用
defineExpose({
  open
})
</script>

<style scoped lang="scss">
.item-right {
    height: 100%;
    display: flex;
    align-items: center;
    color: #999;
    .item-text {
        font-size: 14px;
        margin-right: 10px;
        &.active{
            color: tomato;
        }
    }
}
.uni-list{
  max-height: 400px;
  overflow-y: scroll;
}
.songplay::v-deep.uni-popup__wrapper{
  max-height: 500px;
  overflow-y: scroll;
  width: 100vw;
}
</style>